﻿<!DOCTYPE html>
<html>

	<head>

		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<!--标准mui.css-->
		<link rel="stylesheet" href="muicss/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="muicss/app.css" />
		<!--<link href="muicss/mui.picker.css" rel="stylesheet" />
		<link href="muicss/mui.dtpicker.css" rel="stylesheet" />-->
		<link rel="stylesheet" type="text/css" href="muicss/mui.picker.min.css" />
		<link href="muicss/mui.poppicker.css" rel="stylesheet" />
		<script src="js/jquery-1.8.3.min.js"></script>
		<style>


	.slide{
		top:40px;
		overflow: hidden;
		position: relative;
	


	}
	.slide .img{
		position: absolute;
		transition: width 0.4s,height 0.4s,top 0.4s,left 0.4s,z-index 0.4s;
	}
	.slide .img img{
		width: calc(100%);
	
	}

	.slide .img2{
		width:80%;
		left: -75%;
		z-index: 2;
		opacity: 0.8;
	}
	.slide .img3{
		width: 80%;
		left: 10%;
		z-index: 3;
	}
	.slide .img4{
		width: 80%;
		left: 95%;
		z-index: 2;
		opacity: 0.8;
	}



	.back{
		width: 100%;
		padding-bottom: 200px;
		background: linear-gradient(#2b2731, #1a1a1b); /* 标准的语法 */
	}
	
	.diqu{
		height: 60px;
		width: 80%;
		left: 10%;
		border-bottom: 1px solid white;
		position: relative;
		top:-35px;
	}	
	.diqu span{
		font-size: 20px;
		color: white;
		position: absolute;
		top:20px;

	}
	.diqu input{
		border: 0;
		width: 70%;
		height: 50px;
		text-align: right;
		position: absolute;
		left: 28%;
		top:5px;
		font-size: 16px;
		color: white;
		background:rgba(0,0,0,0);
		color: #4397cc;

	}
	.diqu img{
		position: absolute;
		right: 0;
		top:18px;
		width: 14px;
		height: 22px;
	}
	.xingbie{
		height: 60px;
		width: 80%;
		left: 10%;
		border-bottom: 1px solid white;
		position: relative;
		top:-35px;
	}
	.xingbie span{
		font-size: 20px;
		color: white;
		position: absolute;
		top:20px;

	}	
	.xingbie input{
		border: 0;
		width: 70%;
		height: 50px;
		text-align: right;
		position: absolute;
		left: 28%;
		top: 5px;
		font-size: 16px;
		color: white;
		background:rgba(0,0,0,0);
		color: #4397cc;

	}
	.xingbie img{
		position: absolute;
		right: 0;
		top:18px;
		width: 14px;
		height: 22px;
	}
	.shijian{
		height: 60px;
		width: 80%;
		left: 10%;
		border-bottom: 1px solid white;
		position: relative;
		top:-35px;
	}
	.shijian span{
		font-size: 20px;
		color: white;
		position: absolute;
		top:20px;

	}	
	.shijian input{
		border: 0;
		width: 70%;
		height: 50px;
		text-align: right;
		position: absolute;
		left: 28%;
		top: 5px;
		font-size: 16px;
		color: white;
		background:rgba(0,0,0,0);
		color: #4397cc;

	}
	.shijian img{
		position: absolute;
		right: 0;
		top:18px;
		width: 14px;
		height: 22px;
	}
	</style>
	</head>

	<body>

			


	<div class="back">
	
			<div id="slide" class="slide" >
				<div class="img"><img src="image/1.png"/></div>
				<div class="img"><img src="image/1.png"/></div>
				<div class="img"><img src="image/1.png"/></div>

			</div>

		
			
		
				
			<div class="diqu">
			<span>出生地</span>
			<input  id='showCityPicker3'  type='button' >
			<img src="image/genduo.png">
			</div>

			<div class="xingbie">
			<span>性别</span>
			<input id='showUserPicker'  type='button'>
			<img src="image/genduo.png">
			</div>

			<div class="shijian">
			<span>出生日期</span>
			<input  id='demo7' type='button' data-options='{"type":"hour","customData":{"h":[{"text":"23~1 子时","value":"23~1 子时"},{"text":"1~3 丑时","value":"1~3 丑时"},{"text":"3~5 寅时","value":"3~5 寅时"},{"text":"5~7 卯时","value":"5~7 卯时"},{"text":"7~9 辰时","value":"7~9 辰时"},{"text":"9~11 寅时","value":"9~11 巳时"},{"text":"11~13 午时","value":"11~13 午时"},{"text":"13~15 未时","value":"13~15 未时"},{"text":"15~17 申时","value":"15~17 申时"},{"text":"17~19 酉时","value":"17~19 酉时"},{"text":"19~21 戌时","value":"19~21 戌时"},{"text":"21~23 亥时","value":"21~23 亥时"}]},"labels":["年", "月", "日", "时辰"]}' class="btn ">
			<img src="image/genduo.png">



			<a href="mianfei.html">
			<button style="width: 80%;height: 50px;border: 0;border-radius: 8px; background: linear-gradient(to right, #4f77d0 , #3fa2ca);position:absolute;left: 10%;top:100px;font-size: 20px;color: white;">开始免费测</button></a>
			</div>


		
	</div>		
		
		<script src="muijs/mui.min.js"></script>
		<!--<script src="muijs/mui.picker.js"></script>
		<script src="muijs/mui.dtpicker.js"></script>-->
		<script src="muijs/mui.picker.min.js"></script>
		<script src="muijs/mui.poppicker.js"></script>
		<script src="muijs/city.data.js" type="text/javascript" charset="utf-8"></script>
		<script src="muijs/city.data-3.js" type="text/javascript" charset="utf-8"></script>
		<script>
			(function($) {
				$.init();	
				var btns = $('.btn');
				btns.each(function(i, btn) {
					

					btn.addEventListener('tap', function() {
						var optionsJson = this.getAttribute('data-options') || '{}';
						var options = JSON.parse(optionsJson);
						var id = this.getAttribute('id');
						/*
						 * 首次显示时实例化组件
						 * 示例为了简洁，将 options 放在了按钮的 dom 上
						 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
						 */
						var picker = new $.DtPicker(options);
						picker.show(function(rs) {
							console.log(rs)
							/*
							 * rs.value 拼合后的 value
							 * rs.text 拼合后的 text
							 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
							 * rs.m 月，用法同年
							 * rs.d 日，用法同年
							 * rs.h 时，用法同年
							 * rs.i 分（minutes 的第二个字母），用法同年
							 */
							document.getElementById("demo7").value=rs.value
							/* 
							 * 返回 false 可以阻止选择框的关闭
							 * return false;
							 */
							/*
							 * 释放组件资源，释放后将将不能再操作组件
							 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
							 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
							 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
							 */
							picker.dispose();
						});
					}, false);
				});
			})(mui);
		</script>
		<script>
var autoLb = true;          //autoLb=true为开启自动轮播
var autoLbtime = 10;         //autoLbtime为轮播间隔时间（单位秒）
var touch = true;           //touch=true为开启触摸滑动
var slideBt = true;         //slideBt=true为开启滚动按钮
var slideNub;               //轮播图片数量




$(function(){
$(".slide").height($(".slide").width());
slideNub = $(".slide .img").size();             //获取轮播图片数量
for(i=0;i<slideNub;i++){
	$(".slide .img:eq("+i+")").attr("data-slide-imgId",i);
}

//根据轮播图片数量设定图片位置对应的class
if(slideNub==1){
	for(i=0;i<slideNub;i++){
		$(".slide .img:eq("+i+")").addClass("img3");
	}
}
if(slideNub==2){
	for(i=0;i<slideNub;i++){
		$(".slide .img:eq("+i+")").addClass("img"+(i+3));
	}
}
if(slideNub==3){
	for(i=0;i<slideNub;i++){
		$(".slide .img:eq("+i+")").addClass("img"+(i+2));
	}
}
if(slideNub>3&&slideNub<6){
	for(i=0;i<slideNub;i++){
		$(".slide .img:eq("+i+")").addClass("img"+(i+1));
	}
}
if(slideNub>=6){
	for(i=0;i<slideNub;i++){
		if(i<5){
		   $(".slide .img:eq("+i+")").addClass("img"+(i+1)); 
		}else{
			$(".slide .img:eq("+i+")").addClass("img5"); 
		}
	}
}



//自动轮播
if(autoLb){
	setInterval(function(){
	right();
}, autoLbtime*1000);
}


if(touch){
	k_touch();
}

})

//右滑动
function right(){
var fy = new Array();
for(i=0;i<slideNub;i++){
	fy[i]=$(".slide .img[data-slide-imgId="+i+"]").attr("class");
}
for(i=0;i<slideNub;i++){
	if(i==0){
		$(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[slideNub-1]);
	}else{
	   $(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[i-1]); 
	}
}


}

//左滑动
function left(){
var fy = new Array();
for(i=0;i<slideNub;i++){
	fy[i]=$(".slide .img[data-slide-imgId="+i+"]").attr("class");
}
for(i=0;i<slideNub;i++){
	if(i==(slideNub-1)){
		$(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[0]);
	}else{
	   $(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[i+1]); 
	}
}

}




//触摸滑动模块
function k_touch() {
var _start = 0, _end = 0, _content = document.getElementById("slide");
_content.addEventListener("touchstart", touchStart, false);
_content.addEventListener("touchmove", touchMove, false);
_content.addEventListener("touchend", touchEnd, false);
function touchStart(event) {
	var touch = event.targetTouches[0];
	_start = touch.pageX;
}
function touchMove(event) {
	var touch = event.targetTouches[0];
	_end = (_start - touch.pageX);
}

function touchEnd(event) {
	if (_end < -100) {
		left();
		_end=0;
	}else if(_end > 100){
		right();
		_end=0;
	}
}
}

</script>
		<script>
			(function($, doc) {
				$.init();
				$.ready(function() {
					//普通示例
					var userPicker = new $.PopPicker();
					userPicker.setData([{
						value: '男',
						text: '男'
					}, {
						value: '女',
						text: '女'
					}]);
					var showUserPickerButton = doc.getElementById('showUserPicker');
					showUserPickerButton.addEventListener('tap', function(event) {
						userPicker.show(function(items) {
							showUserPickerButton.value = items[0].value
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
					//-----------------------------------------
					//级联示例
				
					//-----------------------------------------
					//					//级联示例
					var cityPicker3 = new $.PopPicker({
						layer: 3
					});
					cityPicker3.setData(cityData3);
					var showCityPickerButton = doc.getElementById('showCityPicker3');
					showCityPickerButton.addEventListener('tap', function(event) {
						cityPicker3.show(function(items) {
							showCityPickerButton.value = (items[0] || {}).text + " " + (items[1] || {}).text + " " + (items[2] || {}).text;
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
				});
			})(mui, document);
		</script>
	</body>

</html>